<template>
  <el-table-column
    :prop="prop"
    :show-overflow-tooltip="showOverflowTooltip"
    :align="align || 'center'"
    :label="label"
    :sortable="sortable"
    :width="width"
  >
    <template v-if="!children?.length" #default="scope">
      <el-tag
        v-if="isExists(scope?.row?.[prop])"
        effect="plain"
        :type="tags?.[scope?.row?.[prop]]?.type"
        :color="tags?.[scope?.row?.[prop]]?.color"
        >{{ tags?.[scope?.row?.[prop]]?.text }}</el-tag
      >
      <div v-else>-</div>
    </template>
    <template v-for="(c, i) in children || []" :key="i">
      <component
        v-if="noHidden(c)"
        :is="ST_COLLECTION[getType(c)]"
        v-bind="c"
      />
    </template>
  </el-table-column>
</template>

<script lang="ts" setup name="lc-st-tags">
import { ITableColumn } from "../interface";
import { NzSafeAny } from "@/components/sf/type";
import { ST_COLLECTION } from "../index";
import { computed } from "vue";
defineProps<ITableColumn<Record<string, NzSafeAny>>>();
const isExists = (val: NzSafeAny) => {
  return !["", undefined, null].includes(val);
};
const getType = (c: ITableColumn) => {
  return c?.buttons?.length ? "handler" : c.type || "column";
};
const noHidden = computed(() => {
  return (c: ITableColumn) => {
    if (c.hidden) {
      return false;
    }
    return c.iff ? c.iff(c) : true;
  };
});
</script>
../interface @/components/sf/types ../interface
